<template>
  <div class="health-check-form">
    <div class="form-container">
      <h2>从业人员健康体检个人申报</h2>

      <el-form class="form-con" ref="perFormRef" :model="perForm" label-width="120px" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="perForm.name" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="perForm.idCard" placeholder="请输入身份证号" @input="handleIdCardInput"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="perForm.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="perForm.gender" placeholder="请选择">
                <el-option label="男" :value=1></el-option>
                <el-option label="女" :value=0></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族" prop="ethnic">
              <el-select v-model="perForm.ethnic" filterable placeholder="请选择">
                <el-option
                    v-for="item in ethnics"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="文化程度" prop="educationLevel">
              <el-select v-model="perForm.educationLevel" placeholder="请选择">
                <el-option label="小学" value="小学"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="大专" value="大专"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
                <el-option label="教授" value="教授"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工龄" prop="workYears">
              <el-input v-model.number="perForm.workYears" placeholder="请输入工龄"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="所属地区" prop="parkId">
              <el-select v-model="perForm.parkId" filterable placeholder="请选择">
                <el-option
                    v-for="item in parks"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="perForm.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="工种" prop="jobTypeId">
              <!--              <el-select v-model="form.jobTypeId" filterable placeholder="请选择">-->
              <!--                <el-option-->
              <!--                    v-for="item in jobTypes"-->
              <!--                    :key="item.value"-->
              <!--                    :label="item.label"-->
              <!--                    :value="item.value"-->
              <!--                />-->
              <!--              </el-select>-->

              <!-- 当后端传来的数据量很大的时候,下拉框如果选择上面那种会加载很久,影响使用体验,可以换以下这种 el-select-v2标签 -->
              <el-select-v2
                  v-model="perForm.jobTypeId"
                  :options="jobTypes"
                  filterable
                  placeholder="请选择工种"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="家庭地址" prop="address">
              <el-input v-model="perForm.address" placeholder="请输入家庭地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="upload-section">
          <div>
            <span
                style="border-bottom: 2px solid #409eff;padding-bottom: 10px;color:#409eff;cursor: pointer;">摊位证</span>
            <p style="margin-top: 20px;" class="upload-tips">附件使用说明:</p>
            <p class="upload-tips">摊位证:新区各园区统一规划出具的摊位证明(注:必传材料)</p>
            <p class="upload-tips">使用方法:(只能上传jpg/png文件，且不超过500kb)</p>
            <p class="upload-tips">1:先点击选取附件，在弹出框内选择要上传的附件，下方会出现上传文件名称</p>
            <p class="upload-tips">2:点击上传，上传成功后下方的文件列表右侧变为绿色对勾，则表示上传成功</p>
            <p class="upload-tips">3:如果上传的文件有误，鼠标移动到文件列表处，点击右侧删除按钮</p>
          </div>
          <div>
            <el-form-item label="上传文件" prop="uploadFile">
              <image-upload v-model="perForm.uploadFile"/>
            </el-form-item>
          </div>
        </div>

        <div class="legal-notice">
          <p>
            根据《中华人民共和国传染病防治法》、《中华人民共和国食品安全法》、《中华人民共和国药品管理法》、《公共场所卫生管理条例》、《化妆品卫生监督条例》、《生活饮用水卫生监督管理办法》等法律法规规定，本人需进行从业人员健康体检，我对本人身份及岗位的真实性作出承诺，并承担相应的法律责任。</p>

          <el-checkbox v-model="perForm.agreeTerms">请阅读以上条款并勾选</el-checkbox>
        </div>

        <div class="form-actions">
          <el-button size="large" type="danger" @click="submitPerForm">提交</el-button>
          <el-button size="large" @click="goBack">返回</el-button>
        </div>

      </el-form>


    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
// 引入调用request方法
import {addPersonApply,} from "@/api/employee/personApply.js";
import {
  ethnics,
  jobTypes,
  loadEthnic, loadJobTypes,
  loadParkId,
  openNotice,
  parks,
  rules
} from "@/api/employee/applyBaseData.js";
import {debounce} from "lodash-es";

const perFormRef = ref(null)

// 定义表单值
const perForm = ref({
  name: '',
  idCard: '',
  age: null,
  gender: null,
  ethnic: '',
  educationLevel: '',
  workYears: null,
  parkId: null,
  phone: '',
  jobTypeId: null,
  industryId: null,
  address: '',
  applyTime: null,
  auditStatus: null,
  unitName: '',
  socialCreditCode: '',
  uploadFile: '',
  auditTime: null,
  remark: '',
  isUnit: 0
})

// 取消
function cancel() {
  resetPerForm()
  // 可选：跳转回列表页
  // router.push({ path: '/health/dataReview' })
}

// 重置表单
function resetPerForm() {
  for (let key in perForm.value) {
    perForm.value[key] = ''
  }
  perForm.value.age = null
  perForm.value.gender = null
  perForm.value.auditStatus = null
  perForm.value.isUnit = null
}

// 防止重复提交
const submitPerForm = debounce(rawSubmitPerForm, 600)
/*提交表单数据*/
function rawSubmitPerForm () {
  perFormRef.value.validate(valid => {
    if (valid && perForm.value.agreeTerms) {
      addPersonApply(perForm.value).then(response => {
        ElMessage.success("新增成功")
        resetPerForm()
        perFormRef.value.resetFields() // 清除所有校验提示
      })
    } else if (!perForm.value.agreeTerms) {
      ElMessage.error('请阅读并同意条款!')
      return false
    } else {
      ElMessage.error('请填写完整信息!')
      return false
    }
  })
}

const goBack = () => {
  // 这里可以根据实际路由配置进行调整
  window.history.back()
}

// 验证身份证格式是否正确（简单验证）
function validIdCard(idCard) {
  return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idCard)
}

function handleIdCardInput(value) {
  // 将输入的字母 x 转换为大写
  form.value.idCard = value.replace(/x/g, 'X');
}

// 监听身份证的变化
watch(() => perForm.value.idCard, (newVal) => {
  if (validIdCard(newVal)) {
    const birthYear = parseInt(newVal.substring(6, 10))
    const currentYear = new Date().getFullYear()
    const genderDigit = parseInt(newVal.charAt(16)) // 第17位（从0开始计数）
    // 设置年龄
    perForm.value.age = currentYear - birthYear
    // 设置性别（1 为男，0 为女）
    perForm.value.gender = genderDigit % 2 === 1 ? 1 : 0
  }
})

// 资源加载就执行的方法
onMounted(() => {
  // 这里执行需要DOM加载完成后才能执行的操作
  openNotice(); // 通知
  loadEthnic(); // 民族
  loadParkId(); // 园区
  loadJobTypes(); // 工种
})

</script>

<style scoped>
.health-check-form {
  background-color: #f5f5f5;
  background-image: url('');
  min-height: 100vh;
  padding: 20px;
}

.form-container {
  background-color: white;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 1400px;
  margin: 0 auto;
}

h2 {
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.upload-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.upload-tips {
  color: #909399;
  font-size: 14px;
  margin: 5px 0;
}

.legal-notice {
  margin: 30px 0;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.legal-notice p {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.form-actions {
  text-align: center;
  margin-top: 30px;
}

.el-button + .el-button {
  margin-left: 20px;
}

.form-con {
  margin-top: 45px;
}

</style>